<template>
  <div class="page detail">
    <custom title="商品详情" is-back />
    <van-swipe class="swipe" :autoplay="3000" indicator-color="white" show-indicators>
      <van-swipe-item>
        <img src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/166711/5/20789/102338/6084c98aEd1fd5116/0ce2ba968d83589e.jpg!q80.dpg" alt="" class="swipeImg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/103788/38/560/180569/5daffadcEdf4dd69e/3ffe4579834f31a9.jpg!q70.dpg.webp" alt="" class="swipeImg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/71652/22/13638/69626/5daffadcE496a90a3/221cb054549dc755.jpg!q70.dpg.webp" alt="" class="swipeImg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/47932/1/14065/348020/5daffaddE2893fc6b/bf213d7b8c23b12b.jpg!q70.dpg.webp" alt="" class="swipeImg" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品描述 -->
    <div class="cont">
      <div class="flex priceBox">
        <div class="price"><span class="priceIcon">¥ </span> 5.09</div>
        <div class="priceTag">会员价: ¥3.80</div>
      </div>
      <div class="flex justify-sb tagBox">
        <div class="flex">
          <!-- <div class="tagStr tagStrOne">特价商品</div>
          <div class="tagStr tagStrTwo">特价商品</div> -->
        </div>
        <div class="tagNum">销量: 1000</div>
      </div>
      <div class="contTit">手表</div>
      <div class="flex justify-sb contF">
        <div>特别优惠，特别使用</div>
        <div class="flex align-center contFShare">
          <img src="@/assets/integralShopDetail/share.png" alt="" class="contFImg" />
          <div @click="shareShow=true">分享</div>
        </div>
      </div>
    </div>
    <!-- 商品属性 -->
    <div class="attr">
      <div class="flex justify-sb align-center attrBox" style="border:none;">
        <div class="flex" @click="shopShow=true">
          <div class="attrBoxTit">已选</div>
          <div class="attrBoxCont">规格：A4；克重：70G；包装：5包装</div>
        </div>
        <div><van-icon name="arrow" class="attrBoxIcon" /></div>
      </div>
      <div class="flex justify-sb align-center attrBox" @click="onGoPage">
        <div class="flex">
          <div class="attrBoxTit">送至</div>
          <div class="flex align-center attrBoxCont">
            <img src="@/assets/integralShopDetail/address.png" alt="" class="attrBoxContImg" />
            <div>湖北>武汉>汉江区</div>
          </div>
        </div>
        <div><van-icon name="arrow" class="attrBoxIcon" /></div>
      </div>
      <div class="flex justify-sb align-center attrBox">
        <div class="flex">
          <div class="attrBoxTit" style="color:#000000;">重量：3.00kg；运费：¥0.00</div>
        </div>
        <!-- <div><van-icon name="arrow" class="attrBoxIcon" /></div> -->
      </div>
    </div>
    <!-- 商品图片 -->
    <div class="shop">
      <div class="shopLine"><van-divider dashed>图文详情</van-divider></div>
      <div>
        <van-image
          fit="contain"
          src="https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/47932/1/14065/348020/5daffaddE2893fc6b/bf213d7b8c23b12b.jpg!q70.dpg.webp"
          class="shopImg"
        />
      </div>
    </div>
    <div class="emtry"></div>
    <!-- 菜单 -->
    <div class="but flex align-center justify-sb">
      <div class="flex flex-direction align-center butCustomer">
        <img src="@/assets/integralShopDetail/customer.png" alt="" class="butCustomerImg" />
        <div class="butCustomerTit">客服</div>
      </div>
      <div class="flex butBox">
        <!-- <div class="butBoxOne">加入购物车</div>
        <div class="butBoxTwo">立即购买</div> -->
        <div class="butBoxThree" @click="onBuy()">立即购买</div>
      </div>
    </div>
    <!-- 属性弹出层 -->
    <van-popup
      v-model:show="shopShow"
      round
      position="bottom"
      safe-area-inset-bottom
    >
      <div class="flex popCont">
        <img src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/166711/5/20789/102338/6084c98aEd1fd5116/0ce2ba968d83589e.jpg!q80.dpg" alt="" class="popContImg" />
        <div class="flex flex-direction popContR">
          <div>
            <div class="popContRTit">手表</div>
            <div class="flex popContRPrice">
              <div>¥ 5.90</div>
              <div class="popContRPriceLine">¥ 37.00</div>
            </div>
          </div>
          <div>选择规格</div>
        </div>
      </div>
      <div class="popAttr">
        <div v-for="(item,index) in skuList" :key="index" class="popAttrM">
          <div class="popAttrTit">{{ item.title }}</div>
          <div class="flex">
            <div v-for="(ite,ind) in item.list" :key="ind" :class="['popAttrBox', ite.select?'popAttrBoxAct':'']" @click="onSeleSku(item,ind)">{{ ite.name }}</div>
            <!-- <div class="popAttrBox">小</div> -->
          </div>
        </div>
        <div class="flex justify-sb align-center">
          <div class="popAttrNum">购买数量</div>
          <div><van-stepper v-model="value" integer min="1" max="4" /></div>
        </div>
      </div>
      <div class="flex justify-sb popBut">
        <!-- <div class="popButL">添加购物车</div>
        <div class="popButR">立即购买</div> -->
        <div class="popButC" @click="onBuy()">立即购买</div>
      </div>
    </van-popup>
    <!-- 分享弹窗 -->
    <van-popup
      v-model:show="shareShow"
      round
      position="bottom"
      safe-area-inset-bottom
    >
      <div class="flex justify-sb align-center shareTop">
        <div></div>
        <div class="shareTopTit">分享</div>
        <div class="shareTopClose"><van-icon name="cross" /></div>
      </div>
      <div class="flex justify-sb align-center shareCont">
        <div class="flex flex-direction align-center">
          <img src="@/assets/integralShopDetail/wx.png" alt="" class="shareContImg" />
          <div>分享给好友</div>
        </div>
        <div class="flex flex-direction align-center">
          <img src="@/assets/integralShopDetail/friend.png" alt="" class="shareContImg" />
          <div>生成分享海报</div>
        </div>
      </div>
      <div class="shareContTip">好物推荐，和大家一起分享你发现的好物</div>
    </van-popup>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
      shareShow: false,
      shopShow: false,
      skuList: [
        {
          title: '产品大小',
          list: [{
            name: '大',
            select: true
          }, {
            name: '小',
            select: false
          }]
        }, {
          title: '商品颜色',
          list: [{
            name: '大',
            select: true
          }, {
            name: '小',
            select: false
          }]
        }
      ]
    }
  },
  created() {
  },
  methods: {
    onBuy() {
      this.$router.push('/integralOrderComplete')
    },
    onSeleSku(item, index) {
      item.list.forEach((i, s) => {
        i.select = s === index
      })
    },
    onGoPage() {
      this.$jump('/shippingAddress')
    }
  }
}
</script>

<style scoped>
.page{
  background: #F2F2F2;
}
.swipe{
  width: 750px;
  height: 600px;
  background: #FFDCE2;
}
.swipeImg{
  width: 100%;
  height: 100%;
  display: block;
}
.cont{
  width: 690px;
  padding: 34px 30px;
  background: #FFFFFF;
}
.priceBox{
  margin-bottom: 20px;
}
.price{
  font-size: 46px;
  color: #F35517;
  font-weight: 500;
}
.priceIcon{
  font-size: 38px;
}
.priceTag{
  width: 226px;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(-90deg, #363738, #666666);
  border-radius: 8px;
  text-align: center;
  font-weight: 400;
  color: #FFFEFE;
  font-size: 26px;
  margin-left: 22px;
}
.tagBox{
  margin-top: 20px;
}
.tagStr{
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  border-radius: 6px;
  font-size: 20px;
  margin-right: 10px;
}
.tagStrOne{
  background: #F35517;
  color: #FFFFFF;
}
.tagStrTwo{
  height: 34px;
  line-height: 34px;
  border: 1px solid #F35517;
  color: #F35517;
}
.tagNum{
  font-size: 24px;
  color: #000000;
}
.contTit{
  font-size: 30px;
  font-weight: 600;
  color: #2B2B2B;
  margin-top: 20px;
}
.contF{
  color: #888888;
  font-size: 24px;
}
.contFShare{
  width: 140px;
  justify-content: flex-end;
}
.contFImg{
  width: 25px;
  height: 25px;
  display: block;
  margin-right: 10px;
}
.attr{
  width: 750px;
  background: #FFFFFF;
  margin: 10px 0;
}
.attrBox{
  padding: 32px 30px;
  border-top: 1px solid #E8E8E8;
  line-height: 1rem;
}
.attrBoxTit{
  font-size: 28px;
  color: #BABABA;
}
.attrBoxCont{
  font-size: 26px;
  color: #000000;
  margin-left: 38px;
}
.attrBoxIcon{
  font-size: 40px;
  color: #bbb;
}
.attrBoxContImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-right: 15px;
}
.shop{
  overflow: hidden;
}
.shopLine{
  padding: 0 96px;
  height: 92px;
}
.shopImg{
  width: 100%;
  display: block;
}
.but{
  width: 100%;
  box-sizing: border-box;
  height: 110px;
  background: #fff;
  padding: 15px 30px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
}
.butCustomer{
  width: 80px;
}
.butCustomerImg{
  width: 38px;
  height: 38px;
  display: block;
}
.butCustomerTit{
  font-size: 22px;
  color: #565656;
}
.butBox{
  font-size: 28px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 80px;
  text-align: center;
}
.butBoxOne{
  width: 280px;
  height: 80px;
  background: linear-gradient(90deg, #FFCE23 0%, #FE9D13 98%);
  border-radius: 40px 0px 0px 40px;
}
.butBoxTwo{
  width: 280px;
  height: 80px;
  background: linear-gradient(270deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 0px 40px 40px 0px;
}
.butBoxThree{
  width: 560px;
  height: 80px;
  background: linear-gradient(270deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 40px;
}
.emtry{
  width: 100%;
  height: 110px;
}
.popCont{
  padding: 34px;
  border-bottom: 1px solid #DDDDDD;
}
.popContImg{
  width: 180px;
  height: 180px;
  background: #FFDCE2;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.popContR{
  padding-left: 40px;
  justify-content: space-between;
}
.popContRTit{
  font-size: 30px;
  color: #393939;
  margin-bottom: 18px;
}
.popContRPrice{
  font-size: 30px;
  font-weight: 500;
  color: #F35517;
  line-height: 1rem;
}
.popContRPriceLine{
  text-decoration:line-through;
  margin-left: 12px;
  color: #AAAAAA;
  font-size: 26px;
  align-items: flex-end;
}
.popAttr{
  margin-top: 34px;
  padding: 0 30px;
}
.popAttrTit{
  font-size: 32px;
  color: #000000;
  margin-bottom: 34px;
}
.popAttrM{
  padding-bottom: 60px;
}
.popAttrBox{
  min-width: 100px;
  padding: 0 10px;
  height: 54px;
  line-height: 54px;
  font-size: 24px;
  text-align: center;
  background: #F1F1F1;
  border: 1px solid #F1F1F1;
  color: #000000;
  margin-right: 30px;
}
.popAttrBoxAct{
  background: #FFF3EE;
  border: 1px solid #F35517;
  color: #F35517;
}
.popAttrNum{
  font-size: 32px;
  color: #000000;
}
.popBut{
  padding: 84px 28px 30px;
  color: #FFFFFF;
  font-size: 28px;
  line-height: 76px;
  text-align: center;
}
.popButL{
  width: 330px;
  height: 76px;
  background: linear-gradient(90deg, #FFCE23 0%, #FE9D13 98%);
  border-radius: 38px;
}
.popButR{
  width: 330px;
  height: 76px;
  background: linear-gradient(270deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 38px;
}
.popButC{
  width: 660px;
  height: 76px;
  background: linear-gradient(270deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 38px;
}
.shareTop{
  height: 80px;
}
.shareTopTit{
  font-size: 30px;
  color: #2B2B2B;
}
.shareTopClose{
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-right: 20px;
  font-size: 30px;
  color: #bbb;
}
.shareCont{
  padding: 20px 112px 105px;
}
.shareContImg{
  width: 120px;
  height: 120px;
  display: block;
}
.shareContTip{
  font-size: 28px;
  color: #919191;
  width: 660px;
  height: 76px;
  line-height: 76px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #C1C1C1;
  border-radius: 38px;
  margin: 0 auto 30px;
}
</style>
